<template>
  <svg id="park-svg">
    <image id='background-img' x="0" y="0" width="100%" height="100%"
      xlink:href="@/assets/img/background.png"></image>
  </svg>
</template>

<script lang="ts">
interface d3ClickEvent {
  target: SVGElement
  offsetX: number
  offsetY: number
}
interface Pointer {
  x: number
  y: number
  imgUrl: string
  productionType?: string //fireExtinguisher4A
}
interface WindowInfo {
  latitude: number
  longitude: number
  regionId: string
  regionName: string
  regionType: number
}
import { select, selectAll } from 'd3-selection'
import fireExtinguisher4A from '@/assets/img/fireExtinguisher4A.png'
import { ref, defineComponent } from 'vue'
export default defineComponent({
  name: 'ParkSvg',
  props: {},
  data() {
    return {
      pointList: [
        {
          x: Math.random() * 500,
          y: Math.random() * 500,
          imgUrl: fireExtinguisher4A,
        },
        {
          x: Math.random() * 500,
          y: Math.random() * 500,
          imgUrl: fireExtinguisher4A,
        },
        {
          x: Math.random() * 500,
          y: Math.random() * 500,
          imgUrl: fireExtinguisher4A,
        },
      ],
    }
  },

  methods: {
    /**
     * @param targetEle被插入的目标元素
     * @param pointList数据源
     */
    produceImage(targetEle: string, pointList: Array<Pointer>) {
      let gruop = select(targetEle).append('g').attr('class', 'imageGruop')
      pointList.forEach((item) => {
        gruop
          .append('image')
          .attr('class', 'image')
          .attr('xlink:href', item.imgUrl)
          .attr('width', 96)
          .attr('height', 96)
          .attr('x', item.x - 48)
          .attr('y', item.y - 48)
      })
      this.imageClick('.imageGruop')
      this.clearWindowInfo()
      this.describeRadial()
      this.imageMouseOver()
    },
    /**
     * @title 图片点击事件
     * @param targetEle被点击的目标元素
     * @param d3ClickEvent被点击的事件源
     */
    imageClick(targetEle: string) {
      let that = this
      select(targetEle).on('click', function (e: d3ClickEvent) {
        // console.log(e)
        let windowInfo = {
          latitude: 23.102,
          longitude: 112.36,
          regionId: '440000',
          regionName: '广州市',
          regionType: 2,
        }
        that.produceWindow(e.target, windowInfo)
      })
    },
    /**
     * @title 生成弹窗
     * @param windowInfo窗体信息
     */
    produceWindow(targetEle: SVGElement, windowInfo: WindowInfo) {
      console.log(targetEle.attributes[4])
      select('#park-svg')
        .append('svg')
        .attr('class', 'window-info')
        .append('rect')
        .attr('fill', 'yellow')
        .attr('width', 96)
        .attr('height', 96)
        .attr('x', targetEle.attributes[4].value)
        .attr('y', targetEle.attributes[5].value)
        .append('text')
        .attr('font-size', '16px')
        .attr('x', targetEle.attributes[4].value)
        .attr('y', targetEle.attributes[5].value)
    },
    /**
     * @title clear-windowInfo
     */
    clearWindowInfo() {
      select('#background-img').on('click', function (e) {
        if (e.target.id === 'background-img') {
          selectAll('.window-info').remove()
        }
      })
    },
    /**
     * @title mouseover and mouseover
     * @problem 闪动问题
     */
    imageMouseOver() {
      // selectAll('.image').on('mouseenter', function (e) {
      //   select('.imageGruop')
      //   .append('rect')
      //   .attr('fill', 'yellow')
      //   .attr('width', 96)
      //   .attr('height', 96)
      //   .attr('x', e.target.attributes[4].value)
      //   .attr('y', e.target.attributes[5].value)
      // })
      // selectAll('.image').on('mouseleave', function (e) {
      //   console.log(e)
      //   e.target.remove()
      // })
      selectAll('.image').on('mouseenter', function (e) {
        if(e.target.nodeName!=='image') return
        select('.imageGruop')
        .append('rect')
        .attr('class','bg-rect')
        .attr('fill', 'yellow')
        .attr('width', 96)
        .attr('height', 96)
        .attr('x', e.target.attributes[4].value)
        .attr('y', e.target.attributes[5].value)
      })
      selectAll('.image').on('mouseleave', function (d) {
        select('.bg-rect').remove()
      })
    },
    /**
     * @title 创建渐变/发光滤镜
     */
    describeRadial() {
      let redRadial = select('#background-img')
        .append('radialGradient')
        .attr('id', 'redRadial') //红色渐变
      redRadial
        .append('stop')
        .attr('offset', '0%')
        .style('stop-color', 'rgba(255, 115, 108, 1)')
        .style('stop-opacity', '1')
      redRadial
        .append('stop')
        .attr('offset', '100%')
        .style('stop-color', 'rgba(213, 21, 11, 1)')
        .style('stop-opacity', '1')
    },
  },
  setup: () => {},
  mounted() {
    this.produceImage('#park-svg', this.pointList)
  },
})
</script>

<style lang="less" scoped>
svg {
  width: 100vw;
  height: calc(100vh - 102px);
}
</style>>
